import SEO from "../components/SEO";

<SEO
  title="Flex"
  description="Flex is Box with `display: flex` and comes with helpful style shorthand. It renders a `div` element."
/>

# Flex

Flex is [Box](/box) with `display: flex` and comes with some helpful style shorthands.
It renders a `div` element.

<carbon-ad />

## Import

```js
import { CFlex } from "@chakra-ui/vue";
```

## Usage

When using the Flex component, you can use some of the following helpful shorthand props:

- `direction` for `flexDirection`
- `wrap` for `flexWrap`
- `align` for `alignItems`
- `justify` for `justifyContent`

While you can pass the verbose props, using the shorthand can save you some
time.

```vue live=true
<c-flex align="center">
  <c-flex bg="green.50" align="flex-end">
    <c-text>Box 1</c-text>
  </c-flex>
  <c-flex bg="blue.50" size="150px" align="center" justify="center">
    <c-text text-align="center" bg="orange.50">
      Box 2
    </c-text>
  </c-flex>
  <c-box>
    <c-text bg="tomato" color="white">
      Box 3
    </c-text>
  </c-box>
</c-flex>
```

## Props

> `CFlex` composes the `CBox` component with these extra props. So all Box props apply here. See <nuxt-link to="/box#props">Box</nuxt-link> component for list of props
